$spacing: 4px;

.x-navbar {
    --height: 50px;
    --bg-opacity: 0;
    --padding:#{$spacing * 4};
    padding-left: var(--padding);
    padding-right: var(--padding);
    box-sizing: content-box;

    &-fixed {
        &::before {
            content: '';
            display: block;
            height: var(--height);
        }

        .x-navbar-body {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 998;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }

    &-sticky {
        height: var(--height);
        top: 0;
        position: sticky;
        left: 0;
        right: 0;
        z-index: 998;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: rgba(255, 255, 255, var(--bg-opacity));
    }

    &-mp-weixin {
        width: 104px;
    }

    &-content {
        width: calc(100vw - var(--height) * 4 - var(--padding) * 2);
        display: flex;
        justify-content: center;
        align-items: center;
    }

    &-title {
        width: 100%;
        text-align: center;
    }

    &-icons {
        width: var(--height);
        height: var(--height);
        display: flex;
        justify-content: center;
        align-items: center;

        &-image {
            width: 30px;
            height: 30px;
        }
    }

    &-tools {
        width: calc(var(--height) * 2);
        height: var(--height);
        display: flex;
        align-items: center;
    }
}

.x-search {
    --height: 50px;
    --bg-opacity: 0;
    --padding:#{$spacing * 4};
    height: var(--height);
    display: flex;
    justify-content: center;
    align-items: center;
    top: max(constant(safe-area-inset-top), var(--xl-status-bar-height));
    top: max(env(safe-area-inset-top), var(--xl-status-bar-height));
    position: sticky;
    left: 0;
    right: 0;
    z-index: 998;
    /* #ifdef MP-WEIXIN */
    padding-left: var(--padding);
    padding-right: var(--padding);
    background-color: rgba(255, 255, 255, var(--bg-opacity));
    /* #endif */
    /* #ifndef MP-WEIXIN */
    padding-left: calc(var(--padding) - var(--padding) * var(--bg-opacity));
    padding-right: calc(var(--padding) - var(--padding) * var(--bg-opacity));
    margin-left: calc(calc(var(--height) * 2 + var(--padding)) * var(--bg-opacity));
    margin-right: calc(calc(var(--height) + var(--padding)) * var(--bg-opacity));
    transition: all 0.3s;

    /* #endif */
    &-input {
        flex: 1;
        height: 36px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: rgba(255, 255, 255, max(var(--bg-opacity), 0.75));
        border-radius: 25px;
        border: solid 1px var(--xl-primary);
        padding: 2px 4px 2px 12px;
        gap: 10px;

        &__content {
            flex: 1;
            height: 26px;
            line-height: 26px;
            font-size: 16px;
            font-weight: 500;
        }

        &__btn {
            width: 58px;
            height: 28px;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: var(--xl-primary);
            color: #FFFFFF;
            border-radius: 14px;
            font-size: 14px;
            font-weight: 500;
        }
    }

    &-icons {
        width: var(--height);
        height: var(--height);
        display: flex;
        justify-content: center;
        align-items: center;

        &-image {
            width: 30px;
            height: 30px;
        }
    }

    .x-mp-weixin-capsule {
        width: calc(104px * var(--bg-opacity) - var(--padding));
        transition: width 0.3s;
    }
}

.x-tabbar-placeholder,
.x-tabbar {
    height: 50px;
    box-sizing: unset;
}

.x-tabbar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba(255, 255, 255, .75);
    backdrop-filter: blur(10px);
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 998;

    &-item {
        --text-color: var(--xl-dark-light-5);
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        &-icon {
            width: 24px;
            height: 24px;
        }

        &-text {
            font-size: 12px;
            color: var(--text-color);
        }

        &-active {
            --text-color: var(--xl-primary);
        }
    }
}

.userinfo-header {
    --height: 50px;
    --bg-opacity: 0;
    --padding: 16px;
    min-height: var(--height);
    display: flex;
    justify-content: center;
    align-items: center;
    top: max(constant(safe-area-inset-top), var(--xl-status-bar-height));
    top: max(env(safe-area-inset-top), var(--xl-status-bar-height));
    position: sticky;
    left: 0;
    right: 0;
    z-index: 999;
    padding-left: var(--padding);
    padding-right: var(--padding);
    background-color: rgba(255, 255, 255, var(--bg-opacity));

    &-user {
        flex: 1;
        display: flex;
        align-items: center;
        gap: 10px;
        height: var(--height);

        &-image {
            --height: 60px;
            width: calc(var(--height) - var(--height) / 2.4 * var(--bg-opacity));
            height: calc(var(--height) - var(--height) / 2.4 * var(--bg-opacity));
            border-radius: 50%;
            box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(11, 114, 118, 0.1);
            border: 4rpx solid rgba(255, 255, 255, 0.5);
            transition: all 0.3s;
        }

        &-nickname {
            font-size: 16px;
            color: var(--xl-text-color);
            font-weight: 500;
        }

        &-tips {
            font-size: 12px;
            color: var(--xl-placeholder);
        }
    }

    &-icons {
        width: var(--height);
        height: var(--height);
        display: flex;
        justify-content: center;
        align-items: center;

        &-image {
            width: 30px;
            height: 30px;
        }
    }

    .x-mp-weixin-capsule {
        width: calc(104px * var(--bg-opacity) - var(--padding));
        transition: width 0.3s;
    }
}

.uni-input-placeholder {
    color: var(--xl-placeholder);
}

.uni-scroll-view::-webkit-scrollbar:horizontal {
    height: 0;
}

.uni-swiper-wrapper {
    border-radius: var(--radius);
}

uni-input {
    height: auto;
    line-height: 1;
}
page {
    background-color: $uni-bg-color-grey;
}

uni-toast {
    z-index: 9999;
}

.item-primary-active {
    font-size: 16px;
    color: var(--xl-primary);
    font-weight: 600;
    position: relative;
    padding: #{$spacing * 4} 0;

    &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: max(20%, 20px);
        height: 2px;
        background-color: var(--xl-primary);
        border-radius: 2px;
    }
}

.btn-round {
    border-radius: 999px;

    &::after {
        border-radius: 999px;
    }
}

image {
	will-change: transform
}